<template>
  <div class="user-info">
    <!-- 账号信息 -->
    <div class="flex flex-cc pb-10 bd-bottom">
      <BaseImage
        class="kang-avatar large mr-10"
        :src="userInfo?.remote?.headPic || userInfo.portrait"
      ></BaseImage>

      <div>
        <div class="fz-18">{{ userInfo?.remote?.account }}</div>

        <!-- 积分余额 -->
        <div
          class="flex flex-cc hover click"
          style="display: inline-flex"
          @click="mitt.emit('dialog:userScore')"
          v-if="props.config?.isSelf"
        >
          <img
            class="mr-5"
            style="width: 16px"
            src="@/kang/img/icon_wallet.png"
          />
          <div class="cl-primary">积分余额</div>
        </div>

        <!-- 用户在线状态 -->
        <div class="online-status" v-else>
          <!-- 在线 -->
          <div class="flex flex-cc" v-if="true">
            <div class="dot bcl-success"></div>
            <div class="cl-blue">在线</div>
          </div>

          <!-- 离线 -->
          <div class="flex flex-cc" v-else>
            <div class="dot bcl-basic"></div>
            <div class="cl-basic">离线</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 基础信息 -->
    <div class="pt-10 pb-10">
      <div class="flex flex-cc">
        <img class="mr-5" style="width: 16px" src="@/kang/img/icon_info.png" />
        <div>基础信息</div>
      </div>

      <div class="cell" v-if="!props.config?.isSelf">
        <div class="label">昵称</div>
        <div class="value flex flex-cc">
          <div class="flex-1 mr-10">
            <n-input
              ref="elInput"
              class="kang-input--normal"
              placeholder="备注"
              :disabled="!isEdit"
              @blur="updateRemark"
              @keydown.enter="updateRemark"
              v-model:value="userInfo.friendAlias"
            ></n-input>
          </div>
          <div
            class="flex flex-center click hover"
            @click="startEdit"
            v-if="!isEdit"
          >
            <img style="width: 16px" src="@/kang/img/icon_edit.png" />
          </div>
        </div>
      </div>

      <div class="cell">
        <div class="label">账号</div>
        <div class="value">{{ userInfo?.remote?.account || '-' }}</div>
      </div>

      <div class="cell">
        <div class="label">IP地址</div>
        <div class="value">{{ userInfo?.remote?.ip || '-' }}</div>
      </div>

      <div class="cell">
        <div class="label">手机型号</div>
        <div class="value">{{ userInfo?.remote?.deviceModel || '-' }}</div>
      </div>

      <div class="bd-bottom mt-10 mb-10"></div>

      <template v-if="props.config?.isSelf">
        <div class="cell">
          <div class="label">性别</div>
          <div class="value">
            {{ userInfo?.remote?.gender === 1 ? '男' : '女' }}
          </div>
        </div>

        <div class="cell">
          <div class="label">生日</div>
          <div class="value">{{ userInfo?.remote?.birthday || '-' }}</div>
        </div>

        <div class="cell">
          <div class="label">邮箱</div>
          <div class="value">{{ userInfo?.remote?.email || '-' }}</div>
        </div>

        <div class="cell">
          <div class="label">手机号</div>
          <div class="value">{{ userInfo?.remote?.mobile || '-' }}</div>
        </div>
      </template>

      <template v-else>
        <div class="switch flex flex-cc flex-rb click">
          <div class="flex flex-cc">
            <div class="icon flex flex-cc">
              <img
                style="width: 24px; transform: translateX(-4px)"
                src="@/kang/img/icon_group_exchange.png"
              />
            </div>
            <div>添加到群</div>
          </div>
        </div>

        <div class="switch flex flex-cc flex-rb">
          <div class="flex flex-cc">
            <div class="icon flex flex-cc">
              <img
                style="width: 24px; transform: translateX(-4px)"
                src="@/kang/img/icon_user_notice.png"
              />
            </div>
            <div>消息免打扰</div>
          </div>

          <div>
            <n-switch
              :default-value="userInfo.isSilent"
              @update:value="setConversationSilent"
            ></n-switch>
          </div>
        </div>

        <div class="switch flex flex-cc flex-rb">
          <div class="flex flex-cc">
            <div class="icon flex flex-cc">
              <img
                style="width: 24px; transform: translateX(-4px)"
                src="@/kang/img/icon_user_fixed.png"
              />
            </div>
            <div>聊天置顶</div>
          </div>

          <div>
            <n-switch
              :checked-value="1"
              :unchecked-value="0"
              :default-value="userInfo.top"
              @update:value="setConversationTop"
            ></n-switch>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import store from '@/store'
import api from '@/kang/js/api'
import mitt from '@/kang/js/mitt'
import wfc from '@/wfc/client/wfc'
import EventType from '@/wfc/client/wfcEvent'

const props = defineProps({
  // 配置
  config: {
    type: Object,
    default: {},
  },

  // 当前会话信息
  info: {
    type: Object,
    default: {},
  },
})

const elInput = ref(null)
const userInfo = ref({})
const isEdit = ref(false)

onMounted(() => {
  if (props.config?.isSelf) {
    getUserInfo(props.config?.userId)
  } else {
    userInfo.value = props.info.conversation._target
    getUserInfo(userInfo.value?.uid)
  }
})

onBeforeUnmount(() => {})

// 获取远程用户信息
async function getUserInfo(userId) {
  const params = {
    userId,
  }

  const { code, data } = await api.getUserInfo(params)

  if (code === 200) {
    userInfo.value.remote = data
  }
}

// 更新备注
function updateRemark() {
  isEdit.value = false
  wfc.setFriendAlias(
    userInfo.value.uid,
    userInfo.value.friendAlias,
    () => {},
    (err) => {
      console.error(err)
    }
  )
}

function startEdit() {
  isEdit.value = true
  setTimeout(() => {
    elInput.value?.focus()
  }, 0)
}

// 消息免打扰
function setConversationSilent(isSilent) {
  store.setConversationSilent(props.info.conversation, isSilent)
}

// 聊天置顶
function setConversationTop(top) {
  store.setConversationTop(props.info.conversation, top ? 1 : 0)
}
</script>

<style lang="scss" scoped>
.user-info {
  .cell {
    display: flex;
    align-items: center;
    height: 40px;

    .label {
      width: 80px;
    }

    .value {
      flex: 1;
      color: var(--color-basic);
    }
  }

  .online-status {
    display: flex;
    align-items: center;
    font-size: 10px;

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 5px;
    }
  }

  .switch {
    padding: 10px;

    &.click {
      &:hover {
        background-color: var(--color-bg);
      }
    }

    .icon {
      width: 30px;
    }
  }
}
</style>
